<template>
  <div>
    <div class="search">
      <div>
        <i class="iconfont icon-xiangzuo" @click="back"></i>
      </div>
      <div class="inp">
        <i class="iconfont icon-sousuo_o"></i>
        <input type="text" v-model="keyword" @keyup.enter="handleEnter" />
      </div>
      <div>搜索</div>
    </div>
    <div class="history">
      <span>搜索历史</span>
      <i class="iconfont icon-shanchu" @click="handleDelete"></i>
      <div class="btn">
        <button v-for="(item, index) of history" :key="index">
          {{ item }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { setLocalStroage, getLocalStroage } from "../../assets/js/storage";
export default {
  data() {
    return {
      keyword: "",
      history: [],
    };
  },
  mounted() {
    var history = getLocalStroage("historys");
    if (history) {
      this.history = history;
    }
  },
  methods: {
    handleEnter() {
      if (!this.history.includes(this.keyword)) {
        this.history.unshift(this.keyword);
        this.history = this.handleHistoryLength(this.history);
        setLocalStroage("historys", this.history);
      } else {
        var index = this.history.indexOf(this.keyword);
        this.history.splice(index, 1);
        this.history.unshift(this.keyword);
      }
      this.keyword = "";
    },
    handleDelete() {
      this.history = "";
      setLocalStroage("historys", this.history);
    },
    back() {
      this.$router.back();
    },
    handleHistoryLength(arr) {
      if (arr.length > 6) {
        var newArr = arr.slice(0, 6);
      }
      return newArr;
    },
  },
};
</script>

<style scoped>
.search {
  display: flex;
  justify-content: space-around;
  font-size: 35px;
  padding: 20px 0;
  align-items: center;
}
.inp {
  width: 60%;
  border: 2px solid #1876fe;
  border-radius: 10px;
  padding: 10px 0;
}
.inp input {
  width: 84.5%;
  line-height: 45px;
  border: none;
  outline: none;
  font-size: 35px;
}
.search i {
  font-size: 50px;
}
.history {
  padding: 20px;
  font-size: 35px;
}
.history i {
  font-size: 40px;
  float: right;
}
.history button {
  height: 80px;
  margin: 25px;
  padding: 10px 25px;
  font-size: 35px;
}
</style>